<template>
	<view class="container" style="background-image: url('/static/zzm/hxjlbjt.png')">
		<view class="balance">
			<view class="left">
				<span class="money">{{ balance.money }}</span>
				<span class="money money1">当前现金余额（元）</span>
				<navigator class="withdrawal" url="/pages/withdrawal/withdrawal">提现</navigator>
			</view>
			<view class="right">
				<span class="lei">累计收入（元）：{{ balance.accumulatedIncome }}</span>
				<span class="lei">累计提现（元）：{{ balance.accumulatedWithdrawal }}</span>
			</view>
		</view>
		<view class="details">
			<span class="title">收支明细</span>
			<view class="card" v-for="(item, index) in incomeAndExpenditureDetails" :key="index">
				<view class="details_left">
					<span>{{ item.title }}</span>
					<span class="time">{{ item.type }}时间：{{ item.time }}</span>
				</view>
			<span class="details_money">+&nbsp;{{item.money}}</span>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
let balance = ref({
	money: 1500,
	accumulatedIncome: 566,
	accumulatedWithdrawal: 200
});
let incomeAndExpenditureDetails = ref([
	{
		title: '车辆清洗',
		type: '核销',
		time: '2020-25-25 66:66',
		money:266
	},
	{
		title: '车辆清洗',
		type: '提现',
		time: '2020-25-25 66:66',
		money:266
	},
	{
		title: '车辆清洗',
		type: '核销',
		time: '2020-25-25 66:66',
		money:266
	},
	{
		title: '车辆清洗',
		type: '核销',
		time: '2020-25-25 66:66',
		money:266
	},
	{
		title: '车辆清洗',
		type: '核销',
		time: '2020-25-25 66:66',
		money:266
	}
]);
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.balance {
	width: 90%;
	height: 16%;
	display: flex;
	justify-content: space-between;
	margin-top: 5%;
}
.left {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50%;
	height: 100%;
	.money {
		font-size: 50rpx;
		color: white;
	}
	.money1 {
		font-size: 25rpx;
		margin-top: 10%;
	}
	.withdrawal {
		height: 20%;
		width: 60%;
		background-color: #ff6532;
		border-radius: 50rpx;
		margin-top: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 27rpx;
		color: white;
	}
}
.right {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	width: 50%;
	height: 100%;
	border-left: 1rpx solid white;
	.lei {
		margin-top: 15%;
		font-size: 30rpx;
		color: white;
	}
}
.details {
	width: 80%;
	height: 84%;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 5%;
	border-radius: 50rpx;
	overflow: auto;
	.title {
		margin-top: 5%;
		margin-right: auto;
		font-size: 40rpx;
	}
	.card {
		border-top: 8rpx solid #ababab50;
		width: 100%;
		height: 10%;
		display: flex;
	justify-content: space-between;
	align-items: center;

	.details_left{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: 35rpx;
		padding: 5% 0;
		
		.time{
			margin-top: 4%;
			font-size: 25rpx;
			opacity: 0.5;
		}
	}
	.details_money{
		font-size: 25rpx;
		font-weight: 400;
		color: red;
	}
		
		
	}
}
</style>
